// vuex 用户模块
import { setToken, getToken,removeToken } from '@/utils/storage.js'

// 共享的数据
const state = {
  // token数据（从本地获取）,当本地数据为空时，需要初始化tokenInfo，不然会报错
  // tokenInfo: JSON.parse(localStorage.getItem('tokenInfo')) || {}
  tokenInfo: getToken()
}
// 操作共享数据的方法
const mutations = {
  // 存放token
  setTokenInfo (state, tokenObj) {
    state.tokenInfo = tokenObj
    // token更新时，存入本地localStorage
    // 页面刷新后，本地数据还在，虽然刷新时，相应的视图不会更新，
    // 但是存放到vuex后，响应式特性，相应的视图数据也会更新
    // localStorage.setItem('tokenInfo', JSON.stringify(tokenObj))
    setToken(tokenObj)
  },

  // 清除本地token
  removeTokenInfo (state) {
    // 将vuex中的tokenInfo清除
    state.tokenInfo = {}
    // 清除本地存储的token
    removeToken()
  }
}
const getters = {}
const actions = {}

export default {
  // 默认情况下（false），模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的
  // true，要添加映射, 可以加上模块名, 来找对应模块的 state/mutations/actions/getters
  namespaced: true,
  // 状态, 即数据, 类似于vue组件中的data
  // 区别在于 data 是组件自己的数据, 而 state 中的数据整个vue项目的组件都能访问到
  state,
  // 函数，用于存放修改 vuex 中的 state 的方法，同步更新数据
  mutations,
  // getters: {
  //   // getters函数的第一个参数是 state
  //   // 必须要有返回值
  //   filterList:  state =>  state.list.filter(item => item > 5)
  // }
  // 用于从 state 中派生出一些状态
  getters,
  // 异步操作修改 state 中的数据
  actions
}
